<template>
  <div class="plugin-container">
    <div class="plugin-item" v-for="item in plugins" :key="item.title">
		<view class="">
		  <div class="plugin-icon">
			<img :src="item.icon" alt="icon" />
		  </div>
		  <div class="plugin-title">{{ item.title }}</div>
		  <div class="plugin-desc">{{ item.description }}</div>
	  </view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      plugins: [
        { icon: '/static/logo.png', title: '微信小程序', description: '在微信小程序中轻松使用' },
        { icon: '/static/logo.png', title: '支付', description: '支持多种支付方式，安全快捷' },
        // 添加更多插件信息
      ]
    };
  }
};
</script>

<style>
.plugin-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px;
  background-color: #f0f0f0;
}
.plugin-item {
  width: 180px;
  padding: 15px;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  margin: 10px;
  text-align: center;
}
.plugin-icon img {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
}
.plugin-title {
  font-size: 16px;
  font-weight: bold;
}
.plugin-desc {
  font-size: 14px;
  color: #666;
}
</style>
